<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>

				<view class="u-f-40 common-title">{{ lang_extension.extensionSetting }}</view>
				<view></view>
			</view>

			<!-- 分割线 -->
			<u-gap height="5" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		<!-- 列表 -->
		<view>
			<view>
				<view v-for="(item, index) in bases" :keu="index" class="flex-center-between u-f-32 u-lh-44 bg-white"
					:style="{
					padding: '32rpx',
					borderTop: `${ index ? 2 : 0 }rpx solid rgba(151,151,151,.2)`
				}">
					<view class="font-medio nowrap">{{ lang_extension[item.labelKey] }}</view>
					<view class="flex-center" style="width: 100%;">
						<input v-if="item.type === 'input'" v-model.number="form[item.key]" type="number"
							style="width: 100%;text-align: right;" :placeholder="lang_extension[item.labelKey + 'Tips']" />
						
						<view v-if="item.type === 'date'" :class="[!form[item.key] ? 'color-grew' : '']"
						style="width: 100%;text-align: right;"
							@click="changeAction(item)">{{ form[item.key] || lang_extension[item.labelKey + 'Tips'] }}
						</view>
						<u-icon class="u-m-l-6" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 推广规则 -->
		<view class="u-m-t-34" style="padding: 0 32rpx;">
			<view class="u-f-28 u-lh-40 font-medio">{{ lang_extension.extensionRuleDescrition }}</view>
			<view class="u-m-t-20">
				<view v-for="(item, index) in decritions" :key="index"
					:class="['u-f-24 u-lh-34', index ? 'u-m-t-36' : '']">
					{{ index+1 }}. {{ item }}
				</view>
			</view>
		</view>

		<!-- 留空 -->
		<view style="height: 200rpx"></view>

		<x-fixed-bottom v-if="!keyboardHeight" background="rgba(0,0,0,0)">
			<view class="flex-center-center u-p-b-40">
				<x-common-btn @click="submitAction">确认支付</x-common-btn>
			</view>
		</x-fixed-bottom>

		<!-- 时间选择器 -->
		<u-picker v-model="timeVisible" mode="time" :params="params" z-index="10203" :showTimeTag="false" @confirm="dateChange">
		</u-picker>
	</view>
</template>

<script>
	import { merchantPromoteRecordApprove } from '@/api/merchant/merchant.js'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				isClick: false,
				timeVisible: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				form: {
					price: '',
					start: '',
					end: ''
				},
				bases: [{
						labelKey: 'extensionCost',
						label: '推广费用',
						type: 'input',
						key: 'price',
						tips: '请输入预算价格'
					},
					{
						labelKey: 'startExpectTime',
						label: '期望开始日期',
						type: 'date',
						key: 'start',
						tips: '请选择期望开始日期'
					},
					{
						labelKey: 'endExpectTime',
						label: '期望结束日期',
						type: 'date',
						key: 'end',
						tips: '请选择期望结束日期'
					},
				],
				decritions: [
					'期望开始日期和结束日期不是推广日期，实际活动日期付款后工作人员会线下通过预留的电话号码联系您确认；',
					'推广费用为X元/ 每天，不同时间段（节假日、休息日）可能会有调整，工作人员会根据预算给您提供最优惠的方案；',
					'这里是纯文本文案，具体的规则说明活动说明，需要由乙方提供，由开发放进系统；',
					'规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明'
				],
				current: {},
				notes: []
			}
		},
		// 获取类型
		onLoad({
			type
		}) {},
		methods: {
			// 选项触发后
			changeAction(item) {
				if (item.type === 'date') {
					this.timeVisible = true
				}
				this.current = item
			},
			// 日期确定后
			dateChange(e) {
				let {
					year,
					month,
					day,
					hour,
					minute
				} = e
				let currentDate = dayjs(`${year}-${ month }-${ day } ${ hour }:${minute}`)
				let ct = currentDate.format('YYYY-MM-DD HH:mm')
				let ck = this.current.key
				let cv = currentDate.valueOf()
				let {
					start,
					end
				} = this.form;

				if (!start && !end) {
					this.form[ck] = `${year}-${ month }-${ day } ${ hour }:${minute}`
				} else if (start && ck === 'end') {
					if (cv - (dayjs(start).valueOf()) < 0) {
						this.$api.msg('结束日期不能小于开始日期')
					} else {
						this.form[ck] = ct
					}
				} else if ((end && ck === 'start')) {
					if ((dayjs(end).valueOf() - cv) < 0) {
						this.$api.msg('开始日期不能大于结束日期')
					} else {
						this.form[ck] = ct
					}
				}
			},
			// 提交表单
			submitAction() {
				let list = this.bases
				for (let i = 0, len = list.length; i < len; i++) {
					let item = list[i]
					if (!this.form[item.key]) return this.$api.msg(item.tips)
				}
				if (this.isClick) return
				this.isClick = true
				let { price, start, end } = this.form
				let queryObj = { pay: price, startTime: dayjs(start).format('YYYY-MM-DD'), endTime: dayjs(end).format('YYYY-MM-DD') }
				merchantPromoteRecordApprove(queryObj).then(() => {
					this.$api.msg('申请已提交')
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => {
					this.isClick = false
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		&-item {
			padding: 20rpx 28rpx 0;
		}

		&-box {
			padding: 32rpx 28rpx 40rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
		}
	}
</style>
